require(['/js/config.js'], () => {
    require(['request', 'template', 'header', 'footer'], (request, template) => {
        class Detial {
            constructor() {
                this.num
                this.list_detial
                this.create_input()
            }
            get_detials() { //获取详情页数据
                var _this = this
                let hashid = location.hash.slice(1)
                return request.get_detial_show({ //返回promise
                    id: hashid
                }).then((resp) => { //实际上返回值与入参无关
                    if (resp.code === 200) {
                        let list = resp.body.list
                        _this.list_detial = list.filter((i) => { //遍历数组筛选id_detial和hashid相同的
                            return i.id_detial == hashid //如果true，返回
                        })[0]
                        _this.num = _this.list_detial.img_total.length
                        if (_this.num > 9) {
                            var obj = {
                                ..._this.list_detial
                            } //备份
                            _this.list_detial.img_total = _this.list_detial.img_total.slice(0, 9) //截取前9个
                        }
                        $('#detial_center_tag').html(template('detial_script', _this.list_detial)) //list_detial格式{obj:[]}
                        _this.list_detial = {
                            ...obj
                        } //还原
                    }
                })
            }
            create_input() { //异步，计算页数，事件委托
                this.get_detials().then(() => {
                    var _this =this
                    var page_num = Math.ceil(this.num / 9) //分成多少页
                    var str = '<ul class="pagenumber">'
                    for (let i = 0; i < page_num; i++) { //创建按钮
                        if(i===0){var onli = 'onclickli'}else{ var onli =''}
                        str += `<li class="changeli ${onli}">${i+1}</li>`
                    }
                    str += '</ul>'
                    $('.pagenumber').after(str);
                    $('.pagenumber').on('click', '.changeli', function () {      //事件委托和获取对象属性的this不同
                        $('.changeli').removeClass('onclickli')
                        $(this).addClass('onclickli')
                        let nownum = $(this).html() - 0 //确保是数子
                        let start = (nownum - 1) * 9
                        let end = nownum * 9
                        var obj = {
                            ..._this.list_detial
                        } //备份
                        _this.list_detial.img_total = _this.list_detial.img_total.slice(start, end) //修改
                        $('#detial_center_tag').html(template('detial_script', _this.list_detial)) //进行新的赋值
                        _this.list_detial = {
                            ...obj
                        } //还原
                    })
                })
            }



        }
        new Detial()
    })
});